//lanyunVideo.js
(function($){
    var defaults = {
		url: document.URL,
		onInit: function() {},
		onFallbackMode: function() {},
		onChange: function() {}
	};
    var lyVideo = function(eltis, options) {
        var self = this;
        self.settings = $.extend({}, defaults, options);
        self.videos = {},
        eltis.each( function() {
			self.init(this);
		});
        return true;
    };
    lyVideo.prototype = {
        init : function(boxel) {
            var that = this;
            var dst = boxel.dataset;
            var $video = $('<video style="opacity:0;" src="'+dst.url+'" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5"></video>');
            $video.appendTo($(boxel));
            $(boxel).append(that.createHtml(dst));
            //$video.css('opacity', 0);
            that.videos[dst.id] = $video[0];
            $(boxel).on('click',function() {
                that.playAndpause(dst.id);
            });
            $video.on("loadedmetadata", function() {
        		$('#currentTime').text(that.timeFormat(0));
        		$('#duration').text(that.timeFormat(this.duration));
                //console.log(that.timeFormat(this.duration));
        		//enableProgressDrag();
        		//enableSoundDrag();
        		//playSpeed(videoSpeed);
        	});
            var range = $(boxel).find('.range'),real = $(boxel).find('.real');
        	$video.on('timeupdate', function() {
        		var currentTime = this.currentTime;
        		var duration = this.duration;
        		var percent = 100 * currentTime / duration;
                range.css('left', percent-0.5 + '%');
        		real.css('width', percent + '%');
        		//$('#currentTime').text(that.timeFormat(currentTime));
        	});
        	$video.on('canplay', function() {
        		//$('.psVideo-loading').fadeOut(100);
        	});
        	$video.on('waiting', function() {
        		//$('.psVideo-loading').fadeIn(100);
        	});
        	$video.on('ended', function() {
        		console.log('end----');
        	});
            this.settings.onInit.call(this, boxel, $video[0]);
        },
        createHtml:function(dst) {
            var html = '<span class="playicon"></span>'+
            '<div class="video-image"><img src="'+dst.image+'" /></div>'+
            '<div class="progress-box">'+
            '   <div class="detail"><em class="buffered"></em><span class="real"></span></div>'+
            '   <span class="range"></span>'+
            '</div>';
            return html;
        },
        playAndpause : function(id) {
            var video = this.videos[id];
            if(!video) return;
            if(video.paused || video.ended) {
                video.play();
                $(video).css('opacity', 1);
                $(video).parent().addClass('playing');
                //$(video).parent.find('.video-image').hide();
            }else{
                video.pause();
            }
        },
        play :function(id) {
            var video = this.videos[id];
            if(!video) return;
            $(video).css('opacity', 1);
            $(video).parent().addClass('playing');
            video.play();
        },
        pause :function(id) {
            var video = this.videos[id];
            if(!video) return;
            video.pause();
        },
        vdata : function() {
            console.log(this.settings.url);
        },
        timeFormat : function(seconds) {
            var minite = Math.floor(seconds / 60);
            if (minite < 10) {
                minite = "0" + minite;
            }
            var second = Math.floor(seconds % 60);
            if (second < 10) {
                second = "0" + second;
            }
            return minite + ":" + second;
        }
    };

    $.fn.lanyunVideo = function(options) {
		return new lyVideo(this, options);
	};
})(Zepto);
